<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        1．以上三个代码vscode自动生成,基本不需要我们重写.
        2.<!DOCTYPE html>文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
        3.<html lang= “en”>告诉浏览器或者搜索引擎这是一个英文网站.本页面采取英文来显示
        4.<meta charset="UTF-8"/>必须写．采取UTF-8来保存文字.如果不写就会乱码.具体原理后面分析.
     -->

    <!-- 
        文本格式化标签
        在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

        标签语义:突出重要性,比普通文字更重要.

        加粗        <strong></strong>或者<b></b>  更推荐使用<strong>标签加粗语义更强烈
        倾斜        <em></em>或者<i></i>          更推荐使用<em>标签加粗语义更强烈
        删除线      <del></del>或者<s></s>        更推荐使用<del>标签加粗语义更强烈
        下划线      <ins></ins>或者<u></u>        更推荐使用<ins>标签加粗语义更强烈
      -->

    <!-- 
        图像标签

        在HTML标签中，<img>标签用于定义HTML页面中的图像。

        <img src="图像URL"/>

        单词image的缩写，意为图像。

        src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

        所谓属性∶简单理解就是属于这个图像标签的特性。

        图像标签的其他属性︰

            src            图片路径        必须属性
            alt            文本            替换文本。图像不能时显示的文字
            title          文本            提示文本。鼠标放到图像上，显示的文字
            width          像素            设置图像的宽度
            height         像素            设置图像的高度
            border         像素            设置图像的边框粗细
       -->

    <!-- 

        1.链接的语法格式
        <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
        单词anchor ['aerko(r)]的缩写，意为∶锚。
        两个属性的作用如下:

        href        用于指定链接目标的url地址，(必须属性）当为标签应用href属性时，它就具有了超链接的功能
        target        用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

        ⒉链接分类:
        1．外部链接:例如< a href="http:// www.baidu.com ">百度</a >。
        2．内部链接网站内部页面之间的相互链接.直接链接内部页面名称即可，例如<a href="index.html">首页</a>。
        3．空链接:如果当时没有确定链接目标时，<a href="#">首页</a >。
        4.下载链接:如果href 里面地址是一个文件或者压缩包，会下载这个文件。
            <a href="img.zip">下载文件</a>
        5．网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
            <a href="www.baidu.com"><img src="img.jpg" alt="img"></a>
        6.锚点链接：当我们点击链接，可以快速定位到页面中的某个位置
            在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#twd">第2集</a>
            找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 id="two">第2集介绍</h3>

        -->

    <!-- 
            1.2表格的基本语法
            <table>
                <tr>
                    <td>单元格内的文字</td>
                    ....
                </tr>
            </table>
            1. <table> </table>是用于定义表格的标签。
            2. <tr></tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。
            3. <td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
            4．字母 td指表格数据( table data )，即数据单元格的内容。

            1.3表头单元格标签
            一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.
            <th>标签表示HTML表格的表头部分(table head的缩写)

            1.4表格属性
            表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置.目的有2个:
            1．记住这些英语单词,后面CSS会使用.
            2．直观感受表格的外观形态.

            align            left , center、right     规定表格相对周围元素的对齐方式。
            border           1或""                    规定表格单元是否拥有边框，默认为""，表示没有边框
            cellpadding      像素值                   规定单元边沿与其内容之间的空白，默认1像素。
            cellspacing      像素值                   规定单元格之间的空白，默认2像素。
            width            像素值或百分比            规定表格的宽度。


            1.5表格结构标签
            使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分.
            在表格标签中，分别用:<thead>标签表格的头部区域、<tbody>标签表格的主体区域.这样可以更好的分清表格结构。

            1.<thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。
            2.<tbody></tbody> :用于定义表格的主体，主要用于放数据本体。
            3.以上标签都是放在<table></table>标签中。

         -->
    <table align="center" border="1" width="300" height="100" cellpadding="10" cellspacing="0">
        <tr>
            <th>name</th>
            <th>sex</th>
        </tr>
        <tr align="center">
            <td>猪八戒</td>
            <td>男</td>
        </tr>
        <tr align="center">
            <td>孙悟空</td>
            <td>男</td>
        </tr>
    </table>

    <table align="center" border="1" width="300" height="100" cellpadding="10" cellspacing="0">
        <thead>
            <tr>
                <th>name</th>
                <th>sex</th>
            </tr>
        </thead>

        <tbody>
            <tr align="center">
                <td>猪八戒</td>
                <td>男</td>
            </tr>
            <tr align="center">
                <td>孙悟空</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>

    <!-- 
        合并单元格方式:
            跨行合并:rowspan="合并单元格的个数"
            跨列合并:colspan="合并单元格的个数"

        目标单元格:(写合并代码)
            跨行∶最上侧单元格为目标单元格,写合并代码
            跨列:最左侧单元格为目标单元格,写合并代码

        合并单元格三步曲:
            1．先确定是跨行还是跨列合并。
            2．找到目标单元格.写上合并方式=合并的单元格数量。比如: <td colspan= “2”></td>。
            3．删除多余的单元格。
     -->
     <table align="center" border="1" cellspacing="0" height="100" width="300">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
     </table>

     <!-- 
        <ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。
        无序列表的基本语法格式如下:
            <ul>
                <li>列表项1</li>
                <li>列表项2</li>
                <li>列表项3</li>
            </ul>
        1．无序列表的各个列表项之间没有顺序级别之分，是并列的。
        2. <ul></ul>中只能嵌套<li><li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
        3.<li>与</li>之间相当于一个容器，可以容纳所有元素。
        4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用css来设置



        自定义列表的使用场景:
        自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

        在HTML标签中，<dl>标签用于定义描述列表(或定义列表），该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
        其基本语法如下:

        <dl>
            <dt>名词1</dt>
            <dd>名词1解释1</dd>
            <dd>名词1解释2</dd>
        </dl>

        1. <dl></dl>里面只能包含<dt>和<dd>。
        2. <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。
      -->


      <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</body>

</html>